<template>
  <div>
    <!-- 处方状态选择 -->
    <el-form :inline="true" :model="searchForm" label-width="100px">
    </el-form>

    <!-- 总结信息 -->
    <div class="summary-container">
      <div class="summary-card" v-for="(item, index) in summaryData" :key="index">
        <div>{{ item.label }}</div>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>

    <!--表格区域-->
    <el-card class="box-card">
      <el-table
        :data="unitList"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <!--复选框,默认会有事件handleSelectionChange-->
        <el-table-column type="selection"> </el-table-column>
        <el-table-column type="index" label="序号">
          <template slot-scope="scope">
            {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="patientId" label="问诊编号"> </el-table-column>
        <el-table-column prop="username" label="患者姓名"> </el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="departments" label="科室"> </el-table-column>
        <el-table-column prop="doctor" label="医生"> </el-table-column>
        <el-table-column prop="registrationFee" label="挂号费"> </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态"> </el-table-column>
        <el-table-column prop="commitTime" label="提交时间"> </el-table-column>
      </el-table>

      <div style="display: flex; justify-content: flex-end;">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[1, 2]"
          :page-size="pageSize"
          layout=" sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
<!--      分页 -->
      <div>
        <div v-for="page in getDisplayedPages()" :key="page" @click="handleCurrentChange(page)">
          {{ page }}
        </div>
      </div>

    </el-card>
  </div>

</template>

<script>
import {getPat } from "@/api/md/patSheet";

export default {
  name: "patSheet",
  data() {
    return {
      summaryData: [
        { label: "总共订单", value: 22132 },
        { label: "订单待支付", value: 232 },
        { label: "订单已完成", value: 232 },
        { label: "订单已取消", value: 232 },
        { label: "订单已退款", value: 232 },
      ],
      processedCount: 1008611,
      pendingCount: 15372,
      startDate: "", //开始日期
      endDate: "",  //结束日期
      unitList: [],//单位列表
      searchForm: {//模糊搜索条件
      },
      pageNum: 1,// 当前页码
      pageSize: 5,   //每页显示条数
      total: 2,//总条数
      dialogVisible: false,
      title: "添加信息",
    };
  },

  methods: {
    viewDetails(row) {
      console.log('查看详细信息:', row);
    },
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage;
      this.getUnitList();//获取单位列表
    },
    //获取单位列表
    getUnitList() { //获取单位列表
      getPat({//获取单位列表
        pageNum: this.pageNum,//当前页码
        pageSize: this.pageSize,
      }).then((res) => {
        // res.data取出的是pageinfo对象，里面包含了分页信息和数据list
        this.unitList = res.data.list;//赋值给单位列表
        this.total = res.data.total;//赋值给总条数
      });
    },
    getDisplayedPages() {
      const totalPages = Math.ceil(this.total / this.pageSize);
      const pages = [];
      if (totalPages <= 2) {
        for (let i = 1; i <= totalPages; i++) {
          pages.push(i);
        }
      } else {
        pages.push(this.pageNum);
        pages.push(this.pageNum + 1);
      }

      return pages;
    },
    //选择行
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  // 这是组件创建完成后执行的函数
  created() {
    this.getUnitList();
  },
};
</script>

<style scoped>

.summary span {
  color: crimson;
  font-weight: bold;
}

.box-card {
  width: 100%;
}
.summary-container {
  display: flex;     /* 使其子元素居中 */
  justify-content: space-around;/* 子元素水平居中 */
}

.summary-card {
  border: 1px solid #ccc;
  padding: 10px;  /* 内边距 */
  text-align: center;  /* 文字居中 */
  width: 150px;    /* 宽度 */
}

.value {
  font-weight: bold;
  font-size: 18px;
}
</style>
